<template lang="html">
    <div class="eventTypeIndex">
        <myHeader :title="'事件列表'">
            <div class="add-icon">
                <i class="iconfont icon-add" @click="addEventType"></i>
            </div>
        </myHeader>
        <div class="eventList">
            <cell
                v-for="(item,index) in eventList"
                :title="item.name"
                :key="index"
                :to="'/eventType/add?id=' + item.id"
            >
                <inline-x-switch v-model="item.cIsDisable" @change="changeDis(item)"></inline-x-switch>
                <div class="eventIcon" :style="{background: '#'+item.rgb}" slot="icon"></div>
            </cell>
        </div>
    </div>
</template>

<script>
import myHeader from '@/components/base/myHeader'
import { Cell, InlineXSwitch } from 'vux'
export default {
    data(){
        return {
            eventList: []
        }
    },
    components: {
        myHeader,
        Cell,
        InlineXSwitch
    },
    methods: {
        getList(){
            this.$vux.loading.show({
                text: '加载中'
            })
            this.$api.get('/event/index').then(res => {
                this.$vux.loading.hide()
                if (res) {
                    this.eventList = res.map(item => {
                        item.cIsDisable = !Boolean(Number(item.isDisabled))
                        return item
                    })
                }
            })
        },
        changeDis(item){
            this.$api.get('/event/disable', {
                id: item.id
            }).then(res => {
                if (res === false) {
                    item.cIsDisable = !item.cIsDisable
                }else{
                    this.$toast('修改成功！')
                }
            })
        },
        addEventType(){
            this.$router.push({
                path: '/eventType/add'
            })
        }
    },
    created(){
        console.log(this.transitionName);
        this.getList()
    },
    watch: {
        // '$route' (to, from) {
        //     const arr = [
        //         'index',
        //         'test',
        //         'eventType',
        //         'eventTypeAdd',
        //         'rememberBigThing',
        //     ];
        //     const compare = arr.indexOf(to.name)>arr.indexOf(from.name);
        //     this.transitionName = compare ? 'transitionLeft' : 'transitionRight';
        // }
    }
}
</script>

<style lang="scss" scoped>
    .eventTypeIndex{
        .add-icon{
            font-size: .16rem;
            text-align: right;
            padding: 0 .1rem;
        }
        .eventIcon{
            display: inline-block;
            background: #ff9;
            width: .24rem;
            height: .24rem;
            vertical-align: middle;
            margin-right: .1rem;
        }
    }
</style>
